<template>
  <div class="wrapp">
    <div class="top-nav">
      <el-row>
        <el-col :span="8">
          <div class="grid-content top-name">——— {{locationName}} ———</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content top-title">
            <span>慧眼大数据</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content top-date">
            <span>2020年12月21日 星期二</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main">
      <el-row :gutter="8">
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple" id="custom">
            <div class="custom-gender">
              <div class="title">客流性别比例</div>
              <div class="progress">
                <div class="gender-text">
                  <p>男性</p>
                  <p>女性</p>
                </div>
                <div class="gender-progress">
                  <div class="female">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="26"
                      :percentage="statisticsGender.male"
                    ></el-progress>
                  </div>
                  <div class="male">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="26"
                      :percentage="statisticsGender.female"
                      status="exception"
                    ></el-progress>
                  </div>
                </div>
              </div>
            </div>
            <div class="custom-age">
              <div class="title">客流年龄分布</div>
              <div id="age-echarts"></div>
            </div>
            <div class="custom-trend">
              <div class="title">客流数量趋势</div>
              <div id="nums-echarts"></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple" id="maps">
            <div id="amap-container"></div>
            <div class="store-title"><h3>店铺客流总量</h3></div>
            <div id="store-echarts"></div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="grid-content bg-purple" id="dates">
            <div class="equipment-date">
              <div class="date-title">设备数据</div>
              <div id="equipment-echarts">
                <div id="equipment-start"></div>
                <div id="equipment-close"></div>
              </div>
            </div>
            <div class="warn-date">
              <div class="date-title">告警数据</div>
              <div id="warn-echarts">
                <div id="warn-start"></div>
                <div id="warn-close"></div>
              </div>
            </div>
            <div class="analysis">
              <div class="data-statistics">
                <div class="data-title">
                  <el-radio-group v-model="statisticsUrl" size="mini" @change="radioGroupChange()">
                    <el-radio-button label="statisticsDay">按日统计</el-radio-button>
                    <el-radio-button label="statisticsWeek">按周统计</el-radio-button>
                    <el-radio-button label="statisticsMonth">按月统计</el-radio-button>
                    <el-radio-button label="statisticsQuarter">按季统计</el-radio-button>
                  </el-radio-group>
                </div>
                
                <div id="dateStatistics"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
var echarts = require("echarts");
//引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "Bank",
  data() {
    return {
      map: null,
      locationList: [],
      statistics: {},
      searchParam: { locationId: "" },
      statisticsUrl: "statisticsDay",
      statisticsGender: {male: 0, female: 0},
      checkedIndex: 0,
      locationName: '',
    };
  },
  components: {},
  computed: {},
  created() {
    let _this = this;
    window.clickMarker = this.clickMarker;
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("amap-container", {
        resizeEnable: true,
      });

      this.map.on("complete", () => {
        console.log("地图加载完成");
        this.map.setZoom(10);
        this.locationList.forEach((item, index) => {
          // 点标记显示内容，HTML要素字符串
          var markerContent =
            "" +
            `<div class="custom-content-marker" onclick="clickMarker(${index})">
                  <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" style="width: 30px;">
            </div>`;

          let marker = new AMap.Marker({
            position: new AMap.LngLat(item.lng, item.lat),
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30),
          });
          marker.setLabel({
            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
            content: item.name, //设置文本标注内容
            direction: "right", //设置文本标注方位
          });
          marker.setMap(this.map);
        });
      });

      this.map.plugin(["AMap.Scale"], () => {
        this.map.addControl(new AMap.Scale({}));
      });

      this.map.plugin("AMap.Geolocation", () => {
        let geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          convert: true,
          showMarker: true,
          panToLocation: true,
          timeout: 10000,
        });
        geolocation.getCurrentPosition();

        this.map.addControl(geolocation);

        AMap.event.addListener(geolocation, "complete", (data) => {
          console.log(data);
        });

        AMap.event.addListener(geolocation, "error", (error) => {
          console.error(error);
        });
      });
    },
    getLocationList() {
        request({
            url: "/rest/location/queryList",
            method: "post",
            data: {
            pageNum: 1,
            pageSize: 10,
            conditions: [{ key: "status", value: 0, method: "ge" }],
            },
        })
        .then((res) => {
            if (res.status) {
                this.locationList = res.data.records;
                this.locationName = this.locationList[0].name
                this.searchParam.locationId = this.locationList[this.checkedIndex].id
                this.initMap();
                this.getStatisticsGender();
                this.getAgeStatistics()
                this.getSevenDayStatistics()
                this.getStatistics()
            } else {
                this.$message.error(res.message);
            }
        })
        .catch((e) => {
            console.error(e);
            this.$message.error("网络错误!");
        });
    },
    clickMarker(index) {
      this.checkedIndex = index
      this.locationName = this.locationList[index].name
      this.searchParam.locationId = this.locationList[index].id
      this.getStatisticsGender();
      this.getAgeStatistics()
      this.getSevenDayStatistics()
      this.getStatistics()
    },
    getStatistics() {
        request({
            url: "/rest/customers/" + this.statisticsUrl,
            method: "post",
            data: this.searchParam,
        })
        .then((res) => {
        if (res.status) {
            this.statistics = res.data;
            this.showDateStatistics();
        } else {
            this.$message.error(res.message);
        }
        })
        .catch((e) => {
        console.error(e);
        this.$message.error("网络错误!");
        });
    },
    radioGroupChange() {
      this.getStatistics();
    },
    selectChange() {
      this.getStatistics();
    },
    getStatisticsGender() {
        request({
            url: "/rest/customers/statisticsGender",
            method: "post",
            data: {locationId: this.locationList[this.checkedIndex].id},
        })
        .then((res) => {
            if (res.status) {
                this.statisticsGender.male = (res.data.length > 0 && res.data[0].man) ? parseInt(res.data[0].man / res.data[0].total * 100) : 0;
                this.statisticsGender.female = (res.data.length > 0 && res.data[0].women) ? parseInt(res.data[0].women / res.data[0].total * 100) : 0;
            } else {
                this.$message.error(res.message);
            }
        })
        .catch((e) => {
          console.error(e);
          this.$message.error("网络错误!");
        });
    },
    showDateStatistics() {
      let statisticsData = {
        dates: [],
        series: [],
        names: ["总数", "新客", "会员", "回头客"],
      };
      let total = {
        name: "总数",
        type: "line",
        data: [],
      };
      let news = {
        name: "新客",
        type: "line",
        data: [],
      };
      let members = {
        name: "会员",
        type: "line",
        data: [],
      };
      let olds = {
        name: "回头客",
        type: "line",
        data: [],
      };
      this.statistics.statistics.forEach((element) => {
        let date = element["date"]

        if(this.statisticsUrl == "statisticsWeek"){
            date = date == 0 ? "周日" : "周" + date
        }

        statisticsData.dates.push(date);
        total.data.push(element["total"]);
        news.data.push(element["newCustomers"]);
        members.data.push(element["member"]);
        olds.data.push(
          element["total"] - element["newCustomers"] - element["member"]
        );
      });
      statisticsData.series.push(total, news, members, olds);
      // 基于准备好的dom，初始化echarts实例
      let warningChart = this.$echarts.init(
        document.getElementById("dateStatistics")
      );
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#96d2f4",
            },
          },
        },
        legend: {
          orient: "horizontal",
          left: "left",
          data: statisticsData.names,
          textStyle: { color: "#fff" },
        },
        xAxis: [
          {
            type: "category",
            data: statisticsData.dates,
            name: "日期",
            axisPointer: {
              type: "shadow",
            },
            axisLabel:{//修改坐标系字体颜色
              show:true,
              textStyle:{
                color:"#fff"
              }
            },

            axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#96d2f4",
            },
        },
        // boundaryGap值为false的时候，折线第一个点在y轴上
        boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "个数",
            // //nameTextStyle:{rich:{'a':{color:'#fff'}}},
            min: 0,
            axisLine: {
              lineStyle: {
                // 设置y轴颜色
                color: "#96d2f4",
              },
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle:{
                color:"#fff"
              }
            },
          },
        ],
        series: statisticsData.series,
      };
      // 使用刚指定的配置项和数据显示图表。
      warningChart.setOption(option);
    },
    getAgeStatistics(){
        request({
        url: "/rest/customers/statisticsAge",
        method: "post",
        data: {locationId: this.locationList[this.checkedIndex].id},
      })
        .then((res) => {
          if (res.status) {
            this.showAgeChart(res.data[0])
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((e) => {
          console.error(e);
          this.$message.error("网络错误!");
        });
    },
    showAgeChart(ageData){
        // console.log(ageData)
        let ageNames = ['0-9','10-20','21-35','36-50','51-70','71-100']
        let ageNums = []
        for(let k in ageNames){
            ageNums.push(ageData[ageNames[k]] || 0)
        }
        let ageChart = echarts.init(document.getElementById("age-echarts"));
        // 1.年龄柱状图
        ageChart.setOption({
            color: ["#3398DB"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            grid: {
                left: "3%",
                right: "4%",
                containLabel: true,
            },
            xAxis: [
                {
                type: "category",
                data: ageNames,
                axisTick: {
                    alignWithLabel: true,
                    inside: true,
                    lengt: 0,
                    lineStyle: {
                    color: "#597487", //---默认取轴线的颜色
                    width: 1,
                    type: "solid",
                    },
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                    color: "#fff",
                    },
                },
                axisLine: {
                    show: true, //---是否显示

                    //------------------- 箭头 -------------------------
                    symbol: ["none", "arrow"], //---是否显示轴线箭头
                    symbolSize: [8, 8], //---箭头大小
                    symbolOffset: [0, 7], //---箭头位置

                    //------------------- 线 -------------------------
                    lineStyle: {
                    color: "#597487",
                    width: 1,
                    type: "solid",
                    },
                },
                },
            ],
            yAxis: [
                {
                type: "value",
                axisLabel:{//修改坐标系字体颜色
                show:true,
                textStyle:{
                color:"#fff"
              }
            },
                },
                 
            ],
            series: [
                {
                name: "直接访问",
                type: "bar",
                barWidth: "60%",
                data: ageNums,
                label: {
                    //---图形上的文本标签
                    show: true,
                    position: "insideTop", //---相对位置
                    rotate: 0, //---旋转角度
                    color: "#96d2f4",
                },
                },
            ],
        });

        setTimeout(function () {
            ageChart.resize();
        }, 200);
    },
    getSevenDayStatistics(){
        request({
            url: "/rest/customers/statisticsWeek",
            method: "post",
            data: this.searchParam,
        })
        .then((res) => {
        if (res.status) {
            this.showSevenDayChart(res.data);
        } else {
            this.$message.error(res.message);
        }
        })
        .catch((e) => {
        console.error(e);
        this.$message.error("网络错误!");
        });
    },
    showSevenDayChart(data){
        // console.log(data)
        let numbers = []
        data.date.forEach((e,i) => {
            let has = false
            for(let i in data.statistics){
                let d = data.statistics[i]
                if(has = (e == d.date)){
                    numbers.push(d.total)
                    break;
                }
            }
            if(!has){
                numbers.push(0)
            }
            data.date[i] = e == 0 ? '周日' : '周' + e
        })

        let sevenDayChart = echarts.init(document.getElementById("nums-echarts"));
        // 2.游客数量趋势折线图
        sevenDayChart.setOption({
        title: {
            text: "近七天客流数量趋势(单位：人)",
            textStyle: {
            fontSize: 16,
            fontWeight: "bolder",
            color: "#96d2f4", // 主标题文字颜色
            },
        },
        lineStyle: {
            color: "#96d2f4",
        },

        // 提示框
        tooltip: {
            trigger: "axis",
        },
        xAxis: {
            type: "category",
            data: data.date,
            axisLine: {
            lineStyle: {
                // 设置x轴颜色
                color: "#96d2f4",
            },
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            axisLabel: {
            show: true,
            textStyle: {
                color: "#fff",
            },
            },
        },

        grid: {
            left: "3%",
            right: "4%",
            containLabel: true,
        },
        yAxis: {
            type: "value",
            axisLabel:{//修改坐标系字体颜色
              show:true,
              textStyle:{
                color:"#fff"
              }
            },
        },
        series: [
            {
            data: numbers,
            type: "line",
            symbolSize: 15,
            symbol: "triangle",
            },
        ],
        });
    },
    getLocationStatistics(){
        request({
            url: "/rest/customers/statisticsLocation",
            method: "post",
            data: {},
        })
        .then((res) => {
        if (res.status) {
            this.showLocationChart(res.data);
        } else {
            this.$message.error(res.message);
        }
        })
        .catch((e) => {
        console.error(e);
        this.$message.error("网络错误!");
        });
    },
    showLocationChart(data){
        let locationChart = echarts.init(document.getElementById("store-echarts"));
        let names = [], datas = []
        data.forEach(e => {
            names.push(e.locationName)
            datas.push(e.total)
        })
        // 3.店铺客流总量
        locationChart.setOption({
        color: ["#3398DB"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        grid: {
            left: "3%",
            right: "4%",
            containLabel: true,
        },
        xAxis: [
            {
            type: "category",
            data: names,
            axisTick: {
                alignWithLabel: true,
                inside: true,
                lengt: 0,
                lineStyle: {
                color: "#597487", //---默认取轴线的颜色
                width: 1,
                type: "solid",
                },
            },
            axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                color: "#fff",
                },
            },
            axisLine: {
                show: true, //---是否显示

                //------------------- 箭头 -------------------------
                symbol: ["none", "arrow"], //---是否显示轴线箭头
                symbolSize: [8, 8], //---箭头大小
                symbolOffset: [0, 7], //---箭头位置

                //------------------- 线 -------------------------
                lineStyle: {
                color: "#597487",
                width: 1,
                type: "solid",
                },
            },
            },
        ],
        yAxis: [
            {
            type: "value",
            axisLabel:{//修改坐标系字体颜色
              show:true,
              textStyle:{
                color:"#fff"
              }
            },
            },
        ],
        series: [
            {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: datas,
            label: {
                //---图形上的文本标签
                show: true,
                position: "insideTop", //---相对位置
                rotate: 0, //---旋转角度
                color: "#96d2f4",
            },
            },
        ],
        });
    },
    getDeviceStatistics(){
        request({
            url: '/rest/userDevices/statistics',
            method: 'get'
        }).then(res => {
            if(res.status){
                this.showDeviceChart(res.data)
            }else{
                this.$message.error(res.message);
            }
        }).catch((e) => {
            console.error(e)
            this.$message.error("网络错误!");
        });
    },
    showDeviceChart(data){
        console.log(data)
        var startChart = echarts.init(document.getElementById("equipment-start"));
        var closeChart = echarts.init(document.getElementById("equipment-close"));
        // 4.设备数据开机饼图
        startChart.setOption({
        tooltip: {
            trigger: "item",
            showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            hideDelay: 20, // 隐藏延迟，单位ms
            backgroundColor: "rgba(255,214,107,0.7)", // 提示框背景颜色
            textStyle: {
            fontSize: "16px",
            color: "#fff", // 设置文本颜色 默认#FFF
            },
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            orient: "vertical",
            left: 10,
            data: ["在线","离线"],
            textStyle: {
            color: "#fff", // 图例文字颜色
            },
        },
        color: ["#ffd66b","#f99"],
        series: [
            {
            name: "设备",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [{ value: data.onLine.length, name: "在线" },{ value: data.total - data.onLine.length, name: "离线" }],
            },
        ],
        });
        // 5.设备数据关机饼图
        closeChart.setOption({
        tooltip: {
            trigger: "item",
            showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            hideDelay: 20, // 隐藏延迟，单位ms
            backgroundColor: "rgba(173,206,116,0.7)", // 提示框背景颜色
            textStyle: {
            fontSize: "16px",
            color: "#fff", // 设置文本颜色 默认#FFF
            },
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            orient: "vertical",
            left: 10,
            data: ["正常",'停用'],
            textStyle: {
            color: "#666", // 图例文字颜色
            },
        },
        color: ["#adce74","#f99"],
        series: [
            {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [{ value: data.normal, name: "正常" },{ value: data.expired, name: "停用" }],
            },
        ],
        });
    },
    getAlarmStatistics(){
        request({
            url: '/rest/alarm/statistics',
            method: 'get'
        }).then(res => {
            if(res.status){
                this.showAlarmChart(res.data)
            }else{
                this.$message.error(res.message);
            }
        }).catch((e) => {
            console.error(e)
            this.$message.error("网络错误!");
        });
    },
    showAlarmChart(data){
        //console.log(data)
        let myChart5 = echarts.init(document.getElementById("warn-start"));
        let myChart6 = echarts.init(document.getElementById("warn-close"));

        // 6.告警数据已处理饼状图
        myChart5.setOption({
        tooltip: {
            trigger: "item",
            showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            hideDelay: 20, // 隐藏延迟，单位ms
            backgroundColor: "rgba(22,165,150,0.7)", // 提示框背景颜色
            textStyle: {
            fontSize: "16px",
            color: "#fff", // 设置文本颜色 默认#FFF
            },
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            orient: "vertical",
            left: 10,
            data: ["已处理"],
            textStyle: {
            color: "#666", // 图例文字颜色
            },
        },
        color: ["#16a596"],
        series: [
            {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [{ value: data.deal, name: "已处理" }],
            },
        ],
        });
        // 7.告警数据未处理饼状图
        myChart6.setOption({
        tooltip: {
            trigger: "item",
            showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            hideDelay: 20, // 隐藏延迟，单位ms
            backgroundColor: "rgba(250,127,114,0.7)", // 提示框背景颜色
            textStyle: {
            fontSize: "16px",
            color: "#fff", // 设置文本颜色 默认#FFF
            },
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            orient: "vertical",
            left: 10,
            data: ["未处理"],
            textStyle: {
            color: "#666", // 图例文字颜色
            },
        },
        color: ["#fa7f72"],
        series: [
            {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [{ value: data.dealt, name: "未处理" }],
            },
        ],
        });
        }
    },

    mounted() {
        //地图
        this.getLocationList()
        this.getLocationStatistics()
        this.getDeviceStatistics()
        this.getAlarmStatistics()
    },
};
</script>

<style lang="scss" scoped>
.wrapp {
  width: 100vw;
  height: 100vh;
  background-color: #0c162f;
  margin-top: -9vh;
  overflow: hidden;
  .top-nav {
    margin-top: 9vh;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      text-align: center;
      color: #fff;
      .top-name {
        font-size: 25px;
        font-weight: 500;
      }
      .top-title {
        font-size: 30px;
        font-weight: bold;
        span {
          display: inline-block;
          width: 80%;
          height: 100%;
          background: #2e4068;
          border-radius: 10px;
        }
      }
      .top-date {
        font-size: 20px;
        font-weight: normal;
      }
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
  }
  .main {
    margin-top: 20px;
    .el-col {
      border-radius: 4px;
    }
    .bg-purple {
      background: #0c162f;
      // border: 1px solid #96d2f4;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 80vh;
      // border: 1px solid #96d2f4;
    }
    #custom {
      color: #fff;
      .custom-gender {
        width: 100%;
        height: 15vh;
        border: 1px solid #96d2f4;
        position: relative;
        margin-bottom: 20px;
        .progress {
          width: 90%;
          height: 100px;
          margin-top: 25px;
          margin-left: 30px;
          display: flex;
          .gender-text {
            flex: 1;
            p {
              text-align: center;
              color: #526979;
            }
          }
          .gender-progress {
            flex: 5;
            margin-top: 13px;
            .female {
              margin-bottom: 10px;
            }
          }
        }
      }
      .custom-age {
        width: 100%;
        height: 30vh;
        border: 1px solid #96d2f4;
        position: relative;
        margin-bottom: 20px;
        #age-echarts {
          // border: 1px solid #fff;
          width: 90%;
          height: 255px;
        }
      }
      .custom-trend {
        width: 100%;
        height: 30vh;
        border: 1px solid #96d2f4;
        position: relative;
        #nums-echarts {
          width: 90%;
          height: 265px;
          margin-top: 10px;
        }
      }
      .title {
        border: 2px solid #96d2f4;
        width: 120px;
        height: 20px;
        letter-spacing: 3px;
        border-radius: 4px;
        position: absolute;
        top: -10px;
        left: 30px;
        z-index: 10;
        color: #96d2f4;
        background: #0c162f;
        -moz-transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        -moz-transform-origin: 0% 0%;
        -webkit-transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        -webkit-transform-origin: 0% 0%;
        -o-transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        -o-transform-origin: 0% 0%;
        transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        transform-origin: 0% 0%;
      }
    }
    #maps {
      .amap-container {
        width: 90%;
        height: 45vh;
      }
      .store-title {
        text-align: center;
        h3 {
          color: #96d2f4;
        }
      }
      #store-echarts {
        border: 1px solid #96d2f4;
        width: 90%;
        height: 32vh;
        margin: 20px auto;
      }
      #amap-container {
        width: inherit;
        height: 45vh;
      }
      .amap-icon img,
      .amap-marker-content img {
        width: 25px;
        height: 34px;
      }

      .marker {
        position: absolute;
        top: -20px;
        right: -118px;
        color: #fff;
        padding: 4px 10px;
        box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
        white-space: nowrap;
        font-size: 12px;
        font-family: "";
        background-color: #25a5f7;
        border-radius: 3px;
      }
    }
    #dates {
      color: #96d2f4;
      .equipment-date {
        width: 100%;
        height: 26.33vh;
        border: 1px solid #96d2f4;
        position: relative;
        #equipment-echarts {
          width: 100%;
          height: 235px;
          margin: 20px auto;
          display: flex;
          justify-content: space-around;
          #equipment-start {
            flex: 1;
          }
          #equipment-close {
            flex: 1;
          }
        }
      }
      .warn-date {
        width: 100%;
        height: 26.33vh;
        border: 1px solid #96d2f4;
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
        #warn-echarts {
          width: 100%;
          height: 235px;
          margin: 20px auto;
          display: flex;
          justify-content: space-around;
          #warn-start {
            flex: 1;
          }
          #warn-close {
            flex: 1;
          }
        }
      }
      .analysis {
        width: 100%;
        height: 26.33vh;
        border: 1px solid #96d2f4;
      }
      .date-title {
        border: 2px solid #96d2f4;
        width: 120px;
        height: 25px;
        font-size: 18px;
        text-align: center;
        letter-spacing: 3px;
        border-radius: 4px;
        position: absolute;
        top: -10px;
        left: 30px;
        z-index: 10;
        color: #96d2f4;
        background: #0c162f;
        -moz-transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        -moz-transform-origin: 0% 0%;
        -webkit-transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        -webkit-transform-origin: 0% 0%;
        -o-transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        -o-transform-origin: 0% 0%;
        transform: rotate(0deg) scale(1, 1) translate(0px, 0px)
          skew(-36deg, 0deg);
        transform-origin: 0% 0%;
      }
      .data-statistics {
        width: 100%;
        height: 240px;
        margin: 0 auto;
        border: 1px solid #96d2f4;
        .data-title {
          width: 71%;
          height: 43px;
          margin: 0 auto;
          .el-radio-group {
            width: 100%;
          }

        }
        #dateStatistics {
          width: 100%;
          height: 235px;
        }
      }
    }
  }
}
</style>
